<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				height: 1300px;
			}
			.img{
				width: 140px;
				height: 200px;
				overflow: hidden;
				transition: all 1s; 
			}
			.img img{
				width: 100%;
			}
			.slide{
				height: 0;
			}
			.backTop{
				width: 30px;
				text-align: center;
				font-size: 14;
				position: fixed;
				right: 10px;bottom: 30px;
				background:gray;
				color: #fff;
				cursor: pointer;
				outline: none;
			}
		</style>
	</head>
	<body>
		<div class="img">
			<img src="img/timg.jpg"/>
		</div>
		<div class="btn">
			<button>收起</button>
			<button>展开</button>
			<button>切换</button>
			<button>切换图片</button>
		</div>
		<div class="backTop">回到顶部</div>
		<script type="text/javascript">
			var btn = document.querySelectorAll(".btn button");
			var img = document.querySelector(".img");
			//收起按钮
			btn[0].addEventListener("click",function(){
				//添加类名
				img.classList.add("slide");
			});
			//展开按钮
			btn[1].addEventListener("click",function(){
				//移除类名
				img.classList.remove("slide");
			});
			//切换按钮
			btn[2].addEventListener("click",function(){
				//切换类名
				img.classList.toggle("slide");
			});
			//切换图片
			//获取img标签
			//元素也具有querySelector()这个方法
			var arr = ["img/1.jpg","img/2.jpg","img/timg.jpg"];
			var imgEle = img.querySelector("img");
			console.log(imgEle);
			btn[3].addEventListener("click",function(){
				var i = Math.floor(Math.random()*(arr.length));
				imgEle.setAttribute("src",arr[i]);
				if(imgEle.src != arr[i]){
					break;
				}
			});
			//回到顶部
			var backTop = document.querySelector(".backTop");
			/**
			 * 1、获取到滚动条的位置
			 * 	window.pageYoffset
			 * 2、知道设置滚动条位置的方法
			 * 	window.moveTo(x,y)
			 * 
			 * */
			backTop.addEventListener("click",function(){
				var timer =  setInterval(function(){
					var scrollY = window.pageYOffset;
//					scrollY-=10;
					window.scrollBy(0,-10);
					if(scrollY <=0){
						clearInterval(timer);
					}
				},10)
			})
			
		</script>
	</body>
</html>
